<template>
  <view v-if="show" class="select-dialog" @click.stop="() => this.show = false">
    <view class="container">
      <view class="image" @click.stop="openScanCode(toTransport)">
        <text class="transport">确认收运</text>
        <image src="/static/task/transport.png"/>
      </view>
      <view class="image" @click.stop="openScanCode(toError)">
        <text class="error">收运异常</text>
        <image src="/static/task/err.png"/>
      </view>
    </view>
  </view>
</template>

<script>
import {scanCode, toPath} from "@/utils/BaseUtils";

export default {
  data() {
    return {
      show: false,
      form: {}
    };
  },
  emits: ['done'],
  methods: {
    open(data = {}) {
      this.form = {...data}
      this.show = true;
    },
    openScanCode(handler) {
      scanCode().then(res => {
        handler?.(res);
        this.form = {};
        this.show = false;
      })
    },
    toError(mdcInstitutionId) {
      this.toBasePath('/abnormal?taskPlanId=' + this.form.id + '&mdcInstitutionId=' + mdcInstitutionId)
    },
    toTransport(mdcInstitutionId) {
      this.toBasePath('/confirmTrans?taskPlanId=' + this.form.id + '&mdcInstitutionId=' + mdcInstitutionId)
    },
    toBasePath(path) {
      toPath("/pages/tasks/plannedRoute" + path)
    },
  }
}
</script>

<style lang="scss" scoped>
.select-dialog {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  margin: 0;
  justify-content: center;
  align-items: center;
  z-index: 99999999999999999;
  background-color: rgba(0, 0, 0, 0.5); /* 遮罩颜色和透明度 */

  .container {
    position: relative;
    text-align: center;
    z-index: 9999999999999;
    display: flex;
    gap: 10rpx;

    .image {
      flex: 1;
      position: relative;
      width: 120pt;
      height: 120pt;

      text {
        position: absolute;
        font-size: 18pt;
        top: 15pt;
        left: 10pt;
        font-weight: bold;

        &.transport {
          color: #1763FC;
        }

        &.error {
          color: #E74634;
        }
      }

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
